Есть ли буквально какой-нибудь способ заставить имена файлов с пробелами работать с <img src="...">? - PullRequest
Новая
       16

Есть ли буквально какой-нибудь способ заставить имена файлов с пробелами работать с <img src="...">?

0 голосов
/ 26 марта 2020

У меня есть файл с именем "Ashen Valley-Thumbnail.jpg".

Для собственного здравого смысла я бы не стал заменять каждый пробел в каждом отдельном имени файла вручную на "действительную" кодировку, такую ​​как %20, которая это единственный способ исправить это, кроме написания программы, которая сделает это для меня (это займет еще больше времени). Моя цель - иметь возможность передавать мои именованные файлы непосредственно в исходные папки (с пробелами!) Без необходимости переименовывать их.

Я пробовал буквально все приемы в книге, а именно name_of_file.replace(/ /g, "%20"), помещая имя в кавычки для src url, и encodeURI(name_of_file), единственные три ответа, которые, как представляется, inte rnet есть для этого вопроса. Ни один из них не работал.

Я использую React и Node.js с Express. В моем файле js на сервере у меня есть блок fs.readdirSync, который возвращает все имена файлов в каталоге. Функция берет имена файлов и пытается сделать <img> из имени файла и пути.

В моем коде нет ошибок, поэтому мне не нужно его печатать. Мне просто нужно, чтобы кто-нибудь сказал мне, возможно ли то, что я пытаюсь сделать sh.

РЕДАКТИРОВАТЬ:

Некоторые пояснения:

Контекст I ' используя <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>
)

Приведенное выше src работает, когда имя файла «Ashen = Valley-Thumbnail.jpg», и я набираю «Ashen = Valley-Thumbnail.jpg» в sr c.

Это в React, часть функционального компонента return(...)

Ответы [ 2 ]

0 голосов
/ 26 марта 2020

Строго по названию вопроса. Звучит так, будто вы задаетесь вопросом ...

Существует ли буквально какой-либо способ заставить имена файлов с пробелами работать с <img src=“…”>

Я только что попробовал поэкспериментировать в своем собственном приложение для локальной реакции, добавив тег тега basi c jsx на мою страницу. 

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

Затем я перетащил случайный JPG со своего рабочего стола в свой проект. В итоге я смог доказать, что да, вы можете отобразить изображение с пробелами в его имени . Я смог получить "potter space media.jpg" для правильного рендеринга.

См. Пример здесь: enter image description here

Что нужно отметить :

  • имеет значение, где вы сохраняете или храните свои изображения. Вы храните их в «./public» против «./src»? *
  • Я нашел этот вопрос и ответы полезными Правильный путь для img в React. js

`

0 голосов
/ 26 марта 2020

Возможно, вы захотите воспользоваться модульностью ваших компонентов. Это пример того, что вы пытаетесь сделать. Я бы ожидал такого рода модульность от профессионального пиара. В противном случае вы можете делать что-то еще в корне неправильно. Используйте пользовательский компонент <Img /> для ваших изображений: 

// 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} />
}

Не используйте <img />. Если вам нужна последовательность, просто замените все <img /> на <Img />. Любой приличный текстовый редактор может изменить это изменение несколькими нажатиями клавиш.

...