Is there literally any way to get whitespace filenames to work with ?

Question

I have a file named "Ashen Valley-Thumbnail.jpg".

For my own sanity, I would rather not replace every single space in every single filename manually with a "valid" encoding like %20, which is the only way to fix this outside of writing a program to do it for me (which would take even longer). My goal is to be able to transfer my named files directly into the source folders (with spaces!) without having to rename them.

I've tried literally every trick in the book, namely name_of_file.replace(/ /g, "%20"), putting the name in quotes for the srcurl, and encodeURI(name_of_file), the only three answers the internet seems to have for this question. None of them worked.

I'm using React and Node.js with Express. In my server.js file, I have a fs.readdirSync block that returns all file names in a directory. The function takes the file names and tries to make an <img> from the file name and the path.

There are no errors in my code, so, I don't need to type it out. I just need someone to tell me if what I'm trying to accomplish is at all possible.

EDIT:

Some clarification:

The context I'm using <img src="..."> in:

props.artwork.map(genre => {
          return(
              <div className = "genre">
              <h2 className = "genre-name">{genre.name}</h2>
              <hr></hr>
              <div>
              {genre.array.map(image => {
                  let name = image.replace(/=|-Thumbnail|.jpg|.png/g, " ");
                  return (
                      <div className = "thumbnail">
                                <img src = {"/images/Artwork/Concept/thumbnails/Ashen Valley-Thumbnail.jpg"} alt = {"" + name + ""}></img> // THIS IS THE PROBLEM AREA *************
                      <p>{name}</p>
                      </div>
                  )
              })}
              </div>
     </div>
)

The src above works when the file name is "Ashen=Valley-Thumbnail.jpg" and I type "Ashen=Valley-Thumbnail.jpg" in the src.

This is in React, part of a functional component's return(...)

You can do . the URL will be properly encoded as "My%20File.jpg" when the image is requested over the network, but the server will interpret it as "My File.jpg" — Andy Ray, Mar 25 '20 at 23:18
"I just need someone to tell me if what I'm trying to accomplish is at all possible." - I don't understand why you're having problems in the first place because browsers will interpret literal spaces in `src=""` attributes as `0x20` spaces as-intended. What isn't working, exactly? What does your browser's network tab show about the image requests? Are you sure the URIs are valid (you can't use `file://` anymore, for example). — Dai, Mar 25 '20 at 23:25
@Dai - The url doesn't use `file://`. However, looking at the network tab, it shows that the url request is still `.../Ashen%20Valley-Thumbnail`, rather than the actual file name. If this is supposed to automatically translate into whitespace, it's failing. EDIT: I know that actual whitespace in urls is impossible. But how do I reconcile this with a filename that literally has whitespace and cannot be linked without it? — Hunter, Mar 25 '20 at 23:44
Ironically for how much detail you put into the question, it's difficult to understand what you're asking. You never state what the actual problem is. Are images not loading on the page if you have a src="something with spaces.jpg" ? What does the network tab of chrome show for those image paths when they don't load? — Andy Ray, Mar 26 '20 at 00:05
@Andy Ray - The problem is that the images aren't loading. The src for each image is the name with whitespace, not the %20. Even when using %20 strictly, however, it still does not work. — Hunter, Mar 26 '20 at 01:33
What is serving your images? There's nothing special about what you're doing. File names can contain spaces and you can have `img src="name with spaces.jpg"` and it will get encoded as %20 over the wire, and load fine. Are you doing some kind of custom asset serving? There may be an issue in code you aren't showing us. The number of comments shows this is not a clear question. You may be basing it on a misunderstanding of something. — Andy Ray, Mar 26 '20 at 19:39

taystack · Answer 1 · 2020-03-26T16:05:19.787

You might want to take advantage of modularizing your components. This is an example of what you are trying to do. I would expect this kind of modularity from a professional PR. Otherwise, you may be doing something else fundamentally wrong. Use a custom <Img /> component for your images:

// Modular hook
function useEncodedURI(uri) {
  const [encoded, setEncoded] = useState();
  useEffect(() => { setEncoded(encodeURI(uri)) }, [uri]);
  return encoded;
}

// Replace all <img /> with <Img />
function Img({ src, ...rest }) {
  const encodedSrc = useEncodedURI(src);
  return <img src={encodedSrc} {...rest} />
}

Don't use <img />. If you want consistency, just replace all <img /> with <Img />. Any decent text editor can swath over this change in a few keystrokes.

score 0 · Answer 2 · answered Mar 26 '20 at 01:29

Strictly going by your title question. It sounds like you're wondering ...

Is there literally any way to get whitespace filenames to work with <img src=“…”>

I just tried experimenting within my own local react app by adding a basic jsx image tag to my page.

 <img width="300" src={"./images/potter space media.jpg"} alt={'stack-overflow-test'} />

I then dragged a random jpg from my desktop into my project. I was eventually able to prove that yes, you can render an image that has spaces in its name. I was able to get "potter space media.jpg" to render correctly.

See Example here:

Things to Note:

it matters where you save or store your images. Are you storing them under "./public" vs. "./src" ?
I found this question and answers helpful Correct path for img on React.js

`

I appreciate the effort, but this also didn't work. My images are in the public folder, but no permutation of periods and public (or without public) works. — Hunter, Mar 26 '20 at 01:45

Is there literally any way to get whitespace filenames to work with ?

2 Answers2